import Echart from '../report-public/flow-e-chart/index';
import ReportEchartAlert from '../report-public/report-echart-alert/index';
import * as ReportUtil from '../../../util/reportUtil';
import trim from 'lodash/trim';
import {Icon} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {datas = [], loading, title = '', module = 1} = this.props;
        const echartoption = this.initEchartOption();
        const marginClass = module === 1 ? {'marginRight': '8px'} : {"marginLeft": "8px"};
        return (
            <div className="analyse-e-chart" style={marginClass}>
                {datas.length > 0 ?
                    <div>
                        <div className="e-chart-head">
                            <span className="e-chart-head-name">{`${title}(TOP5)`}</span>
                            <span className="e-chart-head-more">
								<span onClick={this.showMore.bind(this)} style={{'marginRight': '10px'}}>{getLabel(17499,'更多')}</span>
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@bxmen1`} type="download" title={getLabel(385746,'另存为图片')} onClick={this.downloadImg.bind(this)}/>
							</span>
                        </div>

                        <div className="e-chart-main">
                            <Echart ecId={`${this && this.props && this.props.ecId || ''}_Echart@vmdsp9`} ref="echart" echartoption={echartoption} clickEvent={this.doClickEvent.bind(this)}/>
                        </div>
                    </div>
                    :
                    <ReportEchartAlert ecId={`${this && this.props && this.props.ecId || ''}_ReportEchartAlert@pt01cy`} loading={loading}/>
                }
            </div>
        )
    }

    showMore() {
        const {showModal, module} = this.props;
        showModal && showModal(1, {module});
    }

    doClickEvent(flag, data = {}) {
        const {showModal, module} = this.props;
        showModal && showModal(2, {'module': module, ...data});
    }

    initEchartOption() {
        const {datas = [], title = ''} = this.props;
        const _datas = [];
        const _yAxisData = [];
        datas.map(o => {
            _datas.push(o);
            _yAxisData.push(o.title);
        });
        const echartoption = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    const da = params[0].data;
                    const {tips = '', title = ''} = da;
                    return ReportUtil.echartTipNewLine(title, 50) + '<br/>' + tips;
                },
                axisPointer: {
                    type: 'none',
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: _yAxisData,
                axisLabel: {
                    formatter: function (value) {
                        let __value = trim(value);
                        return ReportUtil.InterceptLabel(__value, 12);
                    }
                }
            },
            color: ['#F67C4C'],
            series: [
                {
                    name: "",
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    barWidth: 40,
                    data: _datas
                },
            ]
        };
        return echartoption;
    }

    downloadImg() {
        const echartid = this.refs.echart.getEchartId();
        const cvs = jQuery("div[_echarts_instance_='" + echartid + "'] canvas")[0];
        ReportUtil.downloadCvs2Img(cvs);
    }
}
